import React, { useEffect, useState } from 'react'

// 需求: 能够让图片跟随图片移动
// 本质: 获取鼠标的坐标, 设置给图片的left top
export default function App() {
  const [positon, setPosition] = useState({ x: 0, y: 0 })
  useEffect(() => {
    const moveHandle = (e) => {
      setPosition({
        x: e.pageX,
        y: e.pageY,
      })
    }

    window.addEventListener('mousemove', moveHandle)

    return () => {
      window.removeEventListener('mousedown', moveHandle)
    }
  }, [])
  return (
    <div>
      <h1>图片跟随鼠标</h1>
      <img
        src="https://img1.baidu.com/it/u=2135029292,2436061196&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1659114000&t=07beb1f002165ea716bae026fe5089b7"
        alt=""
        style={{
          width: 100,
          position: 'absolute',
          left: positon.x,
          top: positon.y,
        }}
      />
    </div>
  )
}
